<template>
  <div>
    <p class="mt-52 font-30 textColor">{{ title }}</p>
    <div
        style="box-sizing: border-box"
      class="w-full rounded mt-22 px-20 flex items-center box-border py-20 inputBackground"
    >
      <div
        class="flex border-r-gray border-white items-center"
        @click="onShowActionSheet"
      >
        <img :src="`${HOST_URL}/symbol/${coin.toLowerCase()}.png`" alt="logo" class="w-48 h-48 rounded-full mr-23" />
        <span class="font-30 mr-50 w-62 textColor">{{ coin }}</span>
        <img src="./icon-arrow.png" alt="logo" class="w-22 h-14" />
      </div>
      <div class="input-wrap flex justify-between flex-1 items-center ml-30">
        <input placeholder="" type="number" class="h-60 border-none inputBackground textColor" :value="value" @input="onInput" :disabled="disabled" />
      </div>
      <div v-if="showMax" class="text-blue pr-20" @click="onMax">max</div>
    </div>
    <div class="flex justify-between font-22 mt-15 text-grey">
      <p v-for="(tip, index) in tips" :key="index">{{ tip }}</p>
    </div>
    <van-action-sheet  v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import { ActionSheet } from "vant";
import { HOST_URL } from '@/config'
// import { mapGetters } from "vuex";
export default {
  name: "MiningExchangeInput",
  components: {
    [ActionSheet.name]: ActionSheet,
  },
  computed: {
    // ...mapGetters({coinList: 'home/coinList'}),
    // actions() { // 下拉列表
    //   const list = this.coinList.slice(0)
    //   list.map(item => {
    //     item.name = item.symbol.toUpperCase()
    //   })
    //   list.unshift({symbol: 'usdt', name: 'USDT'})
    //   return list
    // }
  },
  props: {
    actions: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Number, String],
      default: 0,
    },
    getval:{
        type:String,
        default:''
    },
    coin: {
      type: String,
      default: "ETH",
    },
    showMax: {
      type: Boolean,
      default: true,
    },
    tips: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      HOST_URL,
      show: false,
    };
  },
  methods: {
    onInput(e) { // 响应外层v-models
      this.$emit('input', e.target.value)
    },
    onMax() {
      this.$emit('max')
    },
    onShowActionSheet() {
      if (this.actions.length) {
        this.show = true;
      }
    },
    onSelect(e) { // 选中
      this.$emit('select', e)
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.input-wrap {
  border-left: 1px solid #B8BCC5;
  padding-left: 30px;
}
.van-action-sheet__item{
  background: $main_background;
  color: $text_color;
}
</style>
